<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>电气四班通讯录</title>
<link rel="stylesheet" href="css/layout.css" type="text/css" media="screen" />
<!--[if lt IE 9]>
<link rel="stylesheet" href="css/ie.css" type="text/css" media="screen" />
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="js/hideshow.js" type="text/javascript"></script>
<script src="js/jquery.tablesorter.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.equalHeight.js"></script>
<script type="text/javascript">
	$(document).ready(function(){ 
		//对需要排序的表格给予排序函数
		$(".tablesorter").tablesorter(); 
		
		//根据浏览器的宽度显示主区域的大小
		var main_width = document.body.clientWidth -200;
		$("#main").width(main_width);
		$("#too_small").hide();
		
		//当浏览器宽度变化时，动态显示主区域的内容宽度
		$(window).resize(function(){
			main_width = document.body.clientWidth -200;
			if(document.body.clientWidth < 950){				
				//浏览器宽度小于950时
				$("#sidebar").fadeOut("fast");//隐藏侧边栏
				$("#too_small").slideDown("slow");//显示提示框
				$("#main").width(main_width+170);//扩大显示宽度
			}else{
				//浏览器宽度大于950时
				$("#sidebar").fadeIn("fast");//显示侧边栏
				$("#too_small").slideUp("slow");//隐藏提示框
				$("#main").width(main_width);//还原显示区域宽度
			}
		});		  
	});
	
	
	$(document).ready(function() {

	//页面加载时
	$(".tab_content").hide(); //隐藏所有表格内容
	$("ul.tabs li:first").addClass("active").show(); //激活第一个表格的按钮
	$(".tab_content:first").show(); //显示第一个表格

	//当分类的按钮被点击是
	$("ul.tabs li").click(function() {

		$("ul.tabs li").removeClass("active"); //去掉所有的按钮激活状态
		$(this).addClass("active"); //激活被点击的按钮
		$(".tab_content").hide(); //隐藏所有表格

		var activeTab = $(this).find("a").attr("href"); //寻找与点击按钮对应的表格
		$(activeTab).fadeIn(); //渐隐显示该对应表格的内容
		return false;
	});

});
    </script>

<!--主区域与内容等高-->
<script type="text/javascript">
    $(function(){
        $('.column').equalHeight();
    });
</script>
</head>
<body>

<!--头部区域内容-->
<header id="header">
  <hgroup>
    <h1 class="site_title">通讯录</h1>
    <h2 class="section_title">&nbsp;</h2>
  </hgroup>
</header>
<!--头部结束 --> 
<!---------------------------------------------------------> 
<!---------------------------------------------------------> 
<!--第二行内容-->
<section id="secondary_bar">
  <div class="user">
    <p>保需 (<a href="#">3 条信息</a>)</p>
    <a class="logout_user" href="#" title="退出登录">退出</a> </div>
  <div class="breadcrumbs_container">
    <article class="breadcrumbs"><a href="index.html">首页</a>
      <div class="breadcrumb_divider"></div>
      <a class="current">Dashboard</a></article>
  </div>
</section>
<!--第二行内容结束--> 
<!---------------------------------------------------------> 
<!---------------------------------------------------------> 
<!--左侧边栏-->
<aside id="sidebar" class="column">
  <form class="quick_search">
    <input type="text" value="按Enter键搜索" onFocus="if(!this._haschanged){this.value=''};this._haschanged=true;">
  </form>
  <hr/>
  <h3>导航</h3>
  <ul class="toggle">
    <li class="icn_photo"><a href="#">首页</a></li>
    <li class="icn_profile"><a href="#">个人信息</a></li>
    <li class="icn_view_users"><a href="#">通讯录</a></li>
    <li class="icn_audio"><a href="#">留言板</a></li>
    <li class="icn_categories"><a href="#">最新修改</a></li>
    <!--<li class="icn_new_article"><a href="#">个人信息</a></li>
    <li class="icn_edit_article"><a href="#">通讯录</a></li>
    <li class="icn_tags"><a href="#">Tags</a></li>-->
  </ul>
  <h3>管理员</h3>
  <ul class="toggle">
    <li class="icn_add_user"><a href="#">添加用户</a></li>
    <li class="icn_edit_article"><a href="#">管理用户</a></li>
    <li class="icn_settings"><a href="#">配置</a></li>
  </ul>
  <h3>友情链接</h3>
  <ul class="toggle">
    <!--<li class="icn_folder"><a href="#">File Manager</a></li>
    <li class="icn_photo"><a href="#">Gallery</a></li>
    <li class="icn_audio"><a href="#">Audio</a></li>
    <li class="icn_video"><a href="#">Video</a></li>-->
    <li class="icn_tags"><a href="#">网站1</a></li>
    <li class="icn_tags"><a href="#">网站2</a></li>
    <li class="icn_tags"><a href="#">网站3</a></li>
  </ul>
  <h3>其他</h3>
  <ul class="toggle">
    <li class="icn_security"><a href="#">安全|声明</a></li>
    <li class="icn_jump_back"><a href="#">退出</a></li>
  </ul>
  <footer>
    <hr />
    <p><strong>Copyright &copy; 2012 Baoxu.net</strong></p>
    <p> Created by <a href="http://www.baoxu.net" title="陈保需的个人网站">Baoxu</a></p>
  </footer>
</aside>
<!--左侧边栏结束--> 
<!---------------------------------------------------------> 
<!---------------------------------------------------------> 
<!--主内容区域-->
<section id="main" class="column">
  <h4 class="alert_warning"  id="too_small">你的浏览器宽度太小，已自动隐藏侧边栏以便于浏览，建议最大化浏览器窗口。</h4>
  <h4 class="alert_info">亲，如果联系方式和所在地区神马的换了的话，赶紧更新一下吧，否则代表月亮消灭你。</h4>
  <article class="module width_full">
    <header>
      <h3 class="tabs_involved">通讯录</h3>
      <ul class="tabs">
        <li><a href="#tab1">全部</a></li>
        <li><a href="#tab2">读研</a></li>
        <li><a href="#tab3">工作</a></li>
      </ul>
    </header>
    <div class="tab_container">
      <div id="tab1" class="tab_content">
        <table class="tablesorter" cellspacing="0">
          <thead>
            <tr>
              <th>序号</th>
              <th>姓名</th>
              <th>性别</th>
              <th>常用QQ</th>
              <th>常用Email</th>
              <th>手机号</th>
              <th>就业|读研</th>
              <th>地区</th>
              <th>单位|学校</th>
              <th>职业|专业</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1</td>
              <td>陈保需</td>
              <td>男</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>5th April 2011</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <td>2</td>
              <td>陈慧</td>
              <td>女</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>6th April 2011</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <td>3</td>
              <td>程刚</td>
              <td>男</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>10th April 2011</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <td>4</td>
              <td>褚秀梅</td>
              <td>女</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>16th April 2011</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <td>5</td>
              <td>邓超</td>
              <td>女</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>16th April 2011</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
          </tbody>
        </table>
      </div>
      <!-- end of #tab1 -->
      <div id="tab2" class="tab_content">
        <table class="tablesorter" cellspacing="0">
          <thead>
            <tr>
              <th>序号</th>
              <th>姓名</th>
              <th>性别</th>
              <th>常用QQ</th>
              <th>常用Email</th>
              <th>手机号</th>
              <th>读研</th>
              <th>地区</th>
              <th>学校</th>
              <th>专业</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td><input type="checkbox"></td>
              <td>Lorem Ipsum Dolor Sit Amet</td>
              <td>Articles</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>5th April 2011</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <td><input type="checkbox"></td>
              <td>Ipsum Lorem Dolor Sit Amet</td>
              <td>Freebies</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>6th April 2011</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <td><input type="checkbox"></td>
              <td>Sit Amet Dolor Ipsum</td>
              <td>Tutorials</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>10th April 2011</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <td><input type="checkbox"></td>
              <td>Dolor Lorem Amet</td>
              <td>Articles</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>16th April 2011</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <td><input type="checkbox"></td>
              <td>Dolor Lorem Amet</td>
              <td>Articles</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>16th April 2011</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
          </tbody>
        </table>
      </div>
      <!-- end of #tab2 -->
      <div id="tab3" class="tab_content">
        <table class="tablesorter" cellspacing="0">
          <thead>
            <tr>
              <th>序号</th>
              <th>姓名</th>
              <th>性别</th>
              <th>常用QQ</th>
              <th>常用Email</th>
              <th>手机号</th>
              <th>就业</th>
              <th>地区</th>
              <th>单位</th>
              <th>职业</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td><input type="checkbox"></td>
              <td>Lorem Ipsum Dolor Sit Amet</td>
              <td>Articles</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>5th April 2011</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <td><input type="checkbox"></td>
              <td>Ipsum Lorem Dolor Sit Amet</td>
              <td>Freebies</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>6th April 2011</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <td><input type="checkbox"></td>
              <td>Sit Amet Dolor Ipsum</td>
              <td>Tutorials</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>10th April 2011</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <td><input type="checkbox"></td>
              <td>Dolor Lorem Amet</td>
              <td>Articles</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>16th April 2011</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <td><input type="checkbox"></td>
              <td>Dolor Lorem Amet</td>
              <td>Articles</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>16th April 2011</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
          </tbody>
        </table>
      </div>
      <!-- end of #tab3 --> 
    </div>
    <!-- end of .tab_container --> 
  </article>
  <!--<article class="module width_full">
    <header>
      <h3>Stats</h3>
    </header>
    <div class="module_content">
      <article class="stats_graph">搜索</article>
      <article class="stats_overview">
        <div class="overview_today">
          <p class="overview_day">Today</p>
          <p class="overview_count">1,876</p>
          <p class="overview_type">Hits</p>
          <p class="overview_count">2,103</p>
          <p class="overview_type">Views</p>
        </div>
        <div class="overview_previous">
          <p class="overview_day">Yesterday</p>
          <p class="overview_count">1,646</p>
          <p class="overview_type">Hits</p>
          <p class="overview_count">2,054</p>
          <p class="overview_type">Views</p>
        </div>
      </article>
      <div class="clear"></div>
    </div>
  </article>--> 
  <!-- end of stats article --> 
  <!-- end of content manager article -->
  <article class="module width_full">
    <header>
      <h3>留言板</h3>
    </header>
    <div class="message_list">
      <div class="module_content">
        <div class="message">
          <p><strong>陈保需</strong><strong>：</strong></p>
          <p class="message_content">这真是个好网站啊，哈哈哈，哈哈哈，哈哈哈啊哈</p>
        </div>
        <div class="message">
          <p><strong>陈保需</strong><strong>：</strong></p>
          <p class="message_content">这真是个好网站啊，哈哈哈，哈哈哈，哈哈哈啊哈</p>
        </div>
        <div class="message">
          <p><strong>陈保需</strong><strong>：</strong></p>
          <p class="message_content">这真是个好网站啊，哈哈哈，哈哈哈，哈哈哈啊哈</p>
        </div>
        <div class="message">
          <p><strong>陈保需</strong><strong>：</strong></p>
          <p class="message_content">这真是个好网站啊，哈哈哈，哈哈哈，哈哈哈啊哈</p>
        </div>
        <div class="message">
          <p><strong>陈保需</strong><strong>：</strong></p>
          <p class="message_content">这真是个好网站啊，哈哈哈，哈哈哈，哈哈哈啊哈</p>
        </div>
        <div class="message">
          <p><strong>陈保需</strong><strong>：</strong></p>
          <p class="message_content">这真是个好网站啊，哈哈哈，哈哈哈，哈哈哈啊哈</p>
        </div>
        <div class="message">
          <p><strong>陈保需</strong><strong>：</strong></p>
          <p class="message_content">这真是个好网站啊，哈哈哈，哈哈哈，哈哈哈啊哈</p>
        </div>
      </div>
    </div>
    <footer>
      <form class="post_message">
        <input type="text" value="留个言先~" onFocus="if(!this._haschanged){this.value=''};this._haschanged=true;">
        <input type="submit" class="btn_post_message" value=""/>
      </form>
    </footer>
  </article>
  <!-- end of messages article -->
  <div class="clear"></div>
  <h4 class="alert_warning">A Warning Alert</h4>
  <h4 class="alert_error">An Error Message</h4>
  <h4 class="alert_success">A Success Message</h4>
  <!-- end of styles article -->
  <div class="spacer"></div>
</section>
<!--主内容区域-->
</body>
</html>